<template>
  <!-- 导航条 -->
  <div class="company-detail">
    <van-nav-bar class="page-nav-bar" title="家政平台">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><van-image :src="data.companyCover" fit="contain" /></van-swipe-item>
      <van-swipe-item><van-image :src="data.companyCover" fit="contain" /></van-swipe-item>
      <van-swipe-item><van-image :src="data.companyCover" fit="contain" /></van-swipe-item>
      <van-swipe-item><van-image :src="data.companyCover" fit="contain" /></van-swipe-item>
    </van-swipe>
    <!-- 认证 -->
    <van-cell-group>
      <van-cell>
        <van-row>
          <van-col span=12 class="member">
            <h4 class="h4">{{data.staff}}</h4>
            <p class="p13">注册家政人数</p>
          </van-col>
          <van-col span=12 class="member">
            <h4 class="h4">{{data.customer}}</h4>
            <p class="p13">已认证客户数</p>
          </van-col>
        </van-row>
        <van-row type="flex" justify="center">
          <van-col><follow-item :follow-id="followId" :follow-name="'company'" /></van-col>
        </van-row>
      </van-cell>
    </van-cell-group>
    <!-- 业务范围 -->
    <van-cell-group>
      <van-cell>
        <van-row>
          <van-col><h6 class="skill">业务范围</h6></van-col>
        </van-row>
        <van-row>
          <van-grid>
            <van-grid-item v-for="(item, index) in data.businessScope" :key="index" icon="photo-o" :text="item" />
          </van-grid>
        </van-row>
      </van-cell>
    </van-cell-group>

    <!-- 标签页 -->
    <van-tabs v-model="active">
      <!-- 公司资料 -->
      <van-tab title="公司资料">
        <van-cell>
          <h6 class="skill">公司资质</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.qualifications" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">办公环境</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.environment" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">获得荣誉</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.honor" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">团队风采</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.teamSpirit" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>
      </van-tab>

      <!-- 注册人员 -->
      <van-tab title="注册人员">
        <van-cell>
          <h6 class="skill">公司资质</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.qualifications" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">办公环境</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.environment" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">获得荣誉</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.honor" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>

        <van-cell>
          <h6 class="skill">团队风采</h6>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.teamSpirit" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>
      </van-tab>
    </van-tabs>

    <!-- 基本资料-->
    <van-row>
      <van-cell><h6 class="skill">公司介绍</h6></van-cell>
    </van-row>
    <van-row>
      <van-cell><p>{{data.introduce}}</p></van-cell>
    </van-row>
    <!-- 公司信息 -->
    <van-row>
      <van-cell><h6 class="skill">公司信息</h6></van-cell>
    </van-row>
    <van-row class="capmessage">
      <van-cell>
        <p>公司名称：{{data.companyName}}</p>
        <p>法人代表：{{data.legalPerson}}</p>
        <p>公司电话：{{data.companyTelephone}}</p>
        <p>公司规模：{{data.companySize}}</p>
        <p>公司地址：{{data.address}}</p>
      </van-cell>
    </van-row>
    <!-- 分享页面 -->
    <van-tabbar>
      <van-tabbar-item icon="share-o" @click="showShare = true">分享</van-tabbar-item>
      <van-tabbar-item icon="wechat" @click="showWeixin=true">微信联系</van-tabbar-item>
      <van-tabbar-item icon="phone" @click="showNumber=true">电话联系</van-tabbar-item>
    </van-tabbar>
    <!-- 分享 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <!-- 动作面板 -->
    <van-action-sheet v-model="showWeixin" :actions="action1" @select="onSelect" />
    <van-action-sheet v-model="showNumber" :actions="action2" @select="onSelect" />
  </div>
</template>

<script>
import { getCompanyDetail } from '@/api/company'

export default {
  name: 'CompanyDetail',
  data () {
    return {
      active: 0,
      data: {},
      followId: this.$route.params.id - 0,
      showShare: false, // 分享
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      showWeixin: false, // 微信号面板
      action1: [{ name: '微信号:' }, { name: '123456789' }],
      showNumber: false, // 微信号面板
      action2: [{ name: '手机号:' }, { name: '123456789' }]
    }
  },
  created () {
    this.companyDetail()
  },
  mounted () {},
  methods: {
    async companyDetail () {
      this.data = await getCompanyDetail({ id: this.followId })
    },
    onSelect () {

    }
  }
}
</script>

<style scoped lang="less">
.company-detail {
  .my-swipe .van-swipe-item {
    width: 100%;
    height: 375px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
  .member {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .h4 {
      color: #3F51B5;
      margin: 0;
    }
    .p13 {
      font-size: 26px;
      color: #101010;
      margin: 20px 0px 0px 0px;
    }
  }
  /deep/ .van-grid {
    [class*='van-hairline']::after {
      border: 0;
    }
  }
  .follow-item {
    margin-bottom: 36px;
  }
  .capmessage {
    margin-bottom: 100px;
  }
  .img-wrap {
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
